<template>
  <!--  用CSS实现在一个窗口滚动展示3个不同的元素-->
  <div>
    <div class="scroll">
      <div class="group">
        <div class="card">A</div>
        <div class="card">B</div>
        <div class="card">C</div>
      </div>
      <div class="group">
        <div class="card">A</div>
        <div class="card">B</div>
        <div class="card">C</div>
      </div>
    </div>
    <FlexSample/>
  </div>
</template>
<script>
import FlexSample from "@/views/scroll/FlexSample.vue";
export default {
  name: "ScrollView",
  components: {
    FlexSample
  }
}
</script>

<style scoped>
.scroll {
  margin: 0 auto;
  padding: 20px 0;
  max-width: 700px;
  overflow: hidden;/*用于控制当元素的内容超出其容器的尺寸时如何处理。hidden 值表示超出容器的内容将被隐藏，不会显示滚动条*/
  display: flex;/*弹性容器,该元素的子元素将按照弹性布局的规则进行排列.弹性布局提供了一种灵活的方式来布局元素，可以轻松地实现水平或垂直对齐、自动调整大小等效果*/

  /*
  在CSS中，> 是一个子选择器（child combinator），
  它用于选择某个元素的直接子元素。在你提供的代码片段中，
  > * 表示选择 .scroll 元素的所有直接子元素。
  */
  > * {
    flex: 0 0 100%;
  }

  &:hover .group {
    animation-play-state: paused;
  }
}

.group {
  display: flex;/*内部元素弹性布局*/
  gap: 20px;/*当前容器中的项目之间在行和列方向上都有20像素的间距*/
  padding-right: 20px;/*当前元素内右边距20像素*/
  will-change: transform;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100%));
  }
}

.card {
  width: 100%;
  color: white;
  border-radius: 24px;
  box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
  padding: 20px;
  font-size: xx-large;
  /*justify-content: center;*/
  justify-self: center;/*-self: 是针对自身当前元素的布局： justify是水平对齐，align是垂直轴上的对齐方式*/
  /*align-items: center;*/
  align-self: center;/*justify-items: 针对内部元素的布局*/
  min-height: 200px;

  &:nth-child(1) {
    background: #7958ff;
  }

  &:nth-child(2) {
    background: #5d34f2;
  }

  &:nth-child(3) {
    background: #4300da;
  }
}
</style>
